<template>
  <div class="nicheng">
    <van-nav-bar title="个性昵称">
      <van-icon slot="left" name="arrow-left" @click="$router.back()" />
    </van-nav-bar>
    <van-cell title="个性昵称" />
    
    <van-form validate-first @submit="onSubmit">
      <van-field
        name="validator"
        placeholder="6~14位包含数字和字母"
        v-model="value1"
        :rules="[{ required: true, message: '修改昵称不能为空' }]"
      >
      </van-field>
      <span class="headline">设置一个个性昵称，可以彰显您与众不同的身份。</span>
      <van-button
        class="ok"
        type="primary"
        block
        native-type="submit"
        color="linear-gradient(to right, #FA7D22, #FA461B)"
        @click="okk"
        >确认</van-button
      >
    </van-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value1: "",
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    validator(val) {
      return /^[A-Za-z0-9]{6,14}$/.test(val);
    },
    okk() {
      if (this.value1) {
        this.$router.push("/personal");
      }
    },
  },
};
</script>
<style lang="less" scoped>
.nicheng {
  background-color: #f0f0f0;
  height: 1800px;

  .headline {
    color: #a5a9b3;
    font-size: 12px;
    text-align: center;
    display: block;
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .ok {
    width: 347px;
    height: 44px;
    margin-left: 15px;
    border-radius: 10px;
  }
}
</style>
